<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>展示界面</title>
    <meta charset="UTF-8"/>
    <!-- 省略其他头部信息，如CSS链接、JavaScript脚本等 -->

    <style>
        #students {
            margin: auto;
        }

        table {
            border: 5px solid #000; /* 添加了边框样式和颜色 */
            width: 500px;
            border-spacing: 0;
        }

        body {
            display: flex;
            flex-direction: column; /* 确保元素垂直排列 */
            justify-content: center; /* 水平居中 */
            align-items: stretch; /* 默认情况下，子元素会填满整个容器的高度，如果你想要其他行为，可以调整这个值 */
            margin: 0; /* 消除body的默认边距 */
            height: 100vh; /* 设置body的高度为视口高度，以便元素可以垂直居中 */
        }

        div {
            text-align: center;


        }

        th {
            border: 1px solid black;
            text-align: center;
            height: 50px;
            vertical-align: bottom;
            padding: 0;
        }

        th {
            border: 1px solid black;
            text-align: center;
            height: 50px;
            vertical-align: bottom;
            padding: 0;
        }

        .logout-button {
            position: fixed;
            top: 20px;
            right: 20px;
        }

        .input-container label {
            display: block;
            margin-bottom: 5px;
        }

        .input-container input[type="text"],
        .input-container input[type="password"] {
            /*width: 100%;*/
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        #addFieldsButton {
            width: 100px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

    </style>





</head>
<body>

<div>
    <h3>
        WELCOME
        <span th:text="${student.name}">姓名占位符</span>
    </h3>

    <h4>
        个人信息如下：
        <!-- 如果student是一个复杂的对象，你可能需要访问具体的属性，如student.info -->
        <span th:text="${student.name}">个人信息占位符</span>
        <span th:text="${student.sex}">个人信息占位符</span>
        <span th:text="${student.age}">个人信息占位符</span>
        <span th:text="${student.address}">个人信息占位符</span>
        <span th:text="${student.password}">个人信息占位符</span>
    </h4>
</div>


<div id="inputFieldsContainer">
    <button id="addFieldsButton" class="input-container">更改个人信息</button>


</div>




<!--<h4>-->
<!--    当前用户数量为：<span th:text="${userCount}">用户数量占位符</span>位-->
<!--    &lt;!&ndash; 假设后端将用户数量作为userCount传递到模板中 &ndash;&gt;-->
<!--</h4>-->

<div id="students">
    <table>
        <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>地址</th>
        </tr>
        </thead>
        <tbody>
        <!-- 注意变量名的大小写，并且确保Students是后端传递的列表变量名 -->
        <tr th:each="student : ${Students}">
            <td th:text="${student.name}">姓名占位符</td>
            <td th:text="${student.sex}">性别占位符</td>
            <td th:text="${student.age}">年龄占位符</td>
            <td th:text="${student.address}">地址占位符</td>
        </tr>
        </tbody>
    </table>
</div>

<form action="/logout" method="post"> <!-- 假设注销操作映射到/logout -->
    <!-- 你可能需要添加一个CSRF令牌或其他安全措施 -->
    <div>
        <input type="submit" value="注销" class="logout-button">
    </div>
</form>

</body>

    <script>
    document.getElementById('addFieldsButton').addEventListener('click', function () {
        // 获取容器元素
        let container = document.getElementById('inputFieldsContainer');

        // 清除之前可能存在的输入框
        container.innerHTML = '';

        // 创建输入框和对应的label
        function createInputWithLabel(labelText, inputType, placeholder) {
            // 创建label元素
            let label = document.createElement('label');
            label.textContent = labelText + ':';

            // 创建输入框元素
            let input = document.createElement('input');
            input.type = inputType;
            input.placeholder = placeholder;

            // 包裹在div中以应用样式
            let containerDiv = document.createElement('div');
            containerDiv.classList.add('input-container');
            containerDiv.appendChild(label);
            containerDiv.appendChild(input);

            // 返回包含label和input的div
            return containerDiv;
        }

        // 创建并添加name输入框
        let nameContainer = createInputWithLabel('Name', 'text', 'Name');
        container.appendChild(nameContainer);

        // 创建并添加sex输入框（这里假设使用text，但通常可以使用radio）
        let sexContainer = createInputWithLabel('Sex', 'text', 'Male/Female'); // 或者使用radio
        container.appendChild(sexContainer);

        // 创建并添加age输入框
        let ageContainer = createInputWithLabel('Age', 'number', 'Age');
        container.appendChild(ageContainer);

        // 创建并添加address输入框
        let addressContainer = createInputWithLabel('Address', 'text', 'Address');
        container.appendChild(addressContainer);

        // 创建并添加password输入框
        let passwordContainer = createInputWithLabel('Password', 'password', 'Password');
        container.appendChild(passwordContainer);
    });
</script>

</html>